import cz from "@/assets/icons/cz.svg";
import Group1000002132 from "@/assets/icons/Group1000002132.svg";
import Clipboard from "@/assets/icons/Clipboard.svg";
import ar from "@/assets/icons/ar.svg";
import stop from "@/assets/icons/stop.svg";

// 渲染dom
export const domData = (tableData, type) => {
  let dom = `${tableData
    .map((data, key) =>
      data.children
        .map(
          (item, index) =>
            `<tr >
            <td>
          <label  class="${
            index !== 0 ? "ordersCheckbox dNone" : "ordersCheckbox"
          }">
            <input onclick="getIds(event)" type="checkbox" value=${
              item.ns_order_no
            }  name="hobby" class="${
              index !== 0 ? "all dNone" : "all"
            }"></input>
                   <span class="checkmark"></span>
          </label>

      

            <td>
            <div class="${index !== 0 ? "tb-orders dNone" : "tb-orders"}" >
                <p>
              <strong
                onclick='onDetailsPage(${JSON.stringify(item.order_name)})'
              class='detailsPage'>${item.order_name}
                         <img class='tb-copy'
              onclick='onCopy(event,${JSON.stringify(item.order_name)})'
              src="${"src/assets/icons/cz.svg"}" alt="" srcset="" />
              </strong>
   
              </p>
              
              <p>
                <span class="p13777">Amount:</span>
                <strong class='p-22214'>${item.price}</strong>
                <span class='p13222'>${item.currency}</span>
              </p>
              <p>
                <span class="p13777">Shipping:</span><strong  class='p-22214'>${
                  item.price
                }</strong>
                <span class='p13222'>${item.currency}</span>
              </p>
              <p><span class="p13777">Order time: </span></p>
              <p>${item.created_at_str}</p>
              </div>
            </td>
            
            <td> 
                 <div class="${index !== 0 ? "tb-store dNone" : "tb-store"}" >
              <img src="${Group1000002132}" alt="" srcset="" />
                <p>${item.province}</p>
              </div>
              </td>

            <td>
                <div class="${
                  index !== 0 ? "tb-address dNone" : "tb-address"
                }" >
                  <p>${item.city}</p>
                  <div class="tb-link"  onclick="onEAditddress(event)">
                  <img src="${Clipboard}" alt="" srcset="" />
                   <p>${item.city}</p>
                  <img class='tb-link-ar' src="${"src/assets/icons/ar.svg"}" alt=""  
                   srcset="" />
                  <div></div>
                  </div>
              </div>
          </td>
          <td> 
              <div class="tb-Product">
              <img src="${stop}" alt="" srcset="" />
              <div class="p-text">
                <p class="p-title">
               ${item.ns_order_no}
                </p>
                <p>
                  <!-- SKU: F3Q225-15ml -->
                  <span class="p13777">SKU：</span>
                  <strong>${index}</strong>
                 ${item.currency} 
                </p>
                <p>
                  <span class="p13777">Options：</span>
                  <span class="spanDiv">15ml</span>
                </p>
                <p>
                  <span class="p13777">Price：</span>
                 <strong class='${!index ? "fontC777" : ""}'> ${index}</strong>
                    <span class='${!index ? "fontC777" : ""}'   >  ${
              item.currency
            }  </span>
                </p>
                <p>
                  <span class="p13777">Quantity：</span>
                  <strong class='p-22214'> ${item.price} </strong>
                 ${item.currency}   
                </p>
             </div>
          </div>
          </td>

          <td>  
              <div class="tb-productCost">
               <strong class='p-22214'> ${item.price} </strong>
                 ${item.currency}   
          </div>
          </td>
          <td>  
              <div class="tb-shipping">
               <strong class='p-22214'> ${item.price} </strong>
                 ${item.currency}   
                  <img src="${ar}" alt="" srcset=""  class='imgfirstChild' onclick="onEditBlock(event)" />
                          <div class="tb-editAddress">
                            <div class="address">   ${item.price} </div>
              </div>

          </div>
          </td>
                <td>  
              <div class="tb-productCost">
               <strong class='p-22214'> ${item.price} </strong>
                 ${item.currency}   
          </div>
          </td>

          <td>
           <div class="tb-total">
    <strong class='p-22214'> ${item.price} </strong>
                 ${item.currency}  
          </div>
          </td>

          <tr/>`
        )
        .join("")
    )
    .join("")}`;
  return dom;
};

//  <img src="${"src/assets/icons/edit.svg"}" alt="" srcset="" />

//处理数据格式转换数组
export const fiterArr = (data) => {
  let tableDataArrNew = [];
  for (var i in data) {
    tableDataArrNew.push(...data[i]);
  }
  // let n = 1;
  // tableDataArrNew.forEach((e) => {
  //   e.index = n++;
  //   e.children = [
  //     {
  //       index1: 21,
  //     },
  //   ];
  // });

  // 数组中descrition相同的对象合并成一个children
  let b = [];
  tableDataArrNew.forEach((item, index) => {
    let flag = true;
    b.forEach((item2, index2) => {
      if (item.ns_order_no === item2.ns_order_no) {
        flag = false;
        b[index2].children.push(item);
      }
    });
    if (flag) {
      b.push({
        ns_order_no: item.ns_order_no,
        children: [item],
        x: index,
      });
    }
  });

  return b;
};
